import React, { Component, Fragment } from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { actionCreators } from './store';

import { Input, Button, Form, Select, Radio } from 'antd';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';

const { Option } = Select;

class FieldRepl extends Component{
  state={
  }

  render(){
    return (
      <Fragment>
        <Form.List name="replace">
            {(fields, { add, remove }) => {
              return (
                <div>
                  {fields.map((field, index) => (
                    <div key={field.key} style={{backgroundColor:'#f0f2f5', padding:8, margin:'8px 0'}}>
                      <Form.Item
                      label="输入流字段"
                      name={[field.name, "inField"]}
                      fieldKey={[field.fieldKey, "inField"]}
                      rules={[
                        {
                          required: true,
                          message: '请选择输入流字段！',
                        },
                      ]}
                      >
                        <Select placeholder="请选择输入流字段">
                          {
                            this.props.inputField.map(item=>(
                              <Option key={item.fieldName} value={item.fieldName}>{item.fieldName}</Option>
                            ))
                          }
                        </Select>
                      </Form.Item>
                      <Form.Item
                      label="输出流字段"
                      name={[field.name, "outField"]}
                      fieldKey={[field.fieldKey, "outField"]}
                      rules={[
                        {
                          required: true,
                          message: '请输入输出流字段！',
                        },]}>
                          <Input placeholder="请输入输出流字段"/>
                      </Form.Item>
                      <Form.Item
                      label="使用正则表达式"
                      name={[field.name, "useRegex"]}
                      fieldKey={[field.fieldKey, "useRegex"]}
                      rules={[
                        {
                          required: true,
                          message: '请选择是否使用正则表达式！',
                        },]}>
                          <Radio.Group>
                            <Radio value={true}>是</Radio>
                            <Radio value={false}>否</Radio>
                          </Radio.Group>
                      </Form.Item>
                      <Form.Item
                      label="要替换的字符串"
                      name={[field.name, "replaceString"]}
                      fieldKey={[field.fieldKey, "replaceString"]}
                      rules={[
                        {
                          required: true,
                          message: '请输入要替换的字符串！',
                        },]}>
                        <Input placeholder="请输入要替换的字符串"/>
                      </Form.Item>
                      <Form.Item
                      label="使用...替换"
                      name={[field.name, "replaceByString"]}
                      fieldKey={[field.fieldKey, "replaceByString"]}
                      rules={[
                        {
                          required: true,
                          message: '请输入替换字符串！',
                        },]}>
                        <Input placeholder="请输入替换字符串"/>
                      </Form.Item>
                      <Form.Item
                      label="设置为空串"
                      name={[field.name, "setEmptyString"]}
                      fieldKey={[field.fieldKey, "setEmptyString"]}
                      rules={[
                        {
                          required: true,
                          message: '请选择是否设置为空串！',
                        },]}>
                        <Radio.Group>
                          <Radio value={true}>是</Radio>
                          <Radio value={false}>否</Radio>
                        </Radio.Group>
                      </Form.Item>
                      <Form.Item
                      label="用字段替换时的字段"
                      name={[field.name, "replaceFieldByString"]}
                      fieldKey={[field.fieldKey, "replaceFieldByString"]}
                      rules={[
                        {
                          required: true,
                          message: '请选择用字段替换时的字段！',
                        },
                      ]}
                      >
                        <Select placeholder="请选择用字段替换时的字段">
                          {
                            this.props.inputField.map(item=>(
                              <Option key={item.fieldName} value={item.fieldName}>{item.fieldName}</Option>
                            ))
                          }
                        </Select>
                      </Form.Item>
                      <Form.Item
                      label="整个单词匹配"
                      name={[field.name, "wholdWord"]}
                      fieldKey={[field.fieldKey, "wholdWord"]}
                      rules={[
                        {
                          required: true,
                          message: '请选择是否整个单词匹配！',
                        },]}>
                          <Radio.Group>
                            <Radio value={true}>是</Radio>
                            <Radio value={false}>否</Radio>
                          </Radio.Group>
                      </Form.Item>
                      <Form.Item
                      label="大小写敏感"
                      name={[field.name, "caseSentive"]}
                      fieldKey={[field.fieldKey, "caseSentive"]}
                      rules={[
                        {
                          required: true,
                          message: '请选择是否大小写敏感！',
                        },]}>
                          <Radio.Group>
                            <Radio value={true}>是</Radio>
                            <Radio value={false}>否</Radio>
                          </Radio.Group>
                      </Form.Item>
                      
                      {fields.length > 1&&field.key>0 ? (
                      <Form.Item noStyle>
                        <Button
                        onClick={() => {
                          remove(field.name);
                        }}>
                          <MinusCircleOutlined/>删除该组字段替换
                        </Button>
                      </Form.Item>
                      ) : null}
                    </div>
                  ))}
                <Form.Item noStyle>
                  <Button
                    type="dashed"
                    onClick={() => {
                      add();
                    }}
                  >
                    <PlusOutlined />新增一组字段替换
                  </Button>
                </Form.Item>
              </div>
              );
            }}
          </Form.List>
      </Fragment>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    inputField: state.getIn(['createTask','inputField']).toJS(),
  }
}

const mapDispatchToProps = (dispatch) => ({
})

export default connect(mapStateToProps, mapDispatchToProps)(FieldRepl);